<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>日期</title>
    <script type="text/javascript">
        var HISUIStyleCode = 'pure';
    </script>
    
    <link rel="stylesheet" type="text/css" href="../../dist/css/hisui.pure.min.css"></link>
    <script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../jquery-tag-demo.js"></script>
    <script type="text/javascript" src="../../dist/js/jquery.hisui.min.js"></script>
    <script type="text/javascript" src="../../dist/js/locale/hisui-lang-zh_CN.js"></script>	
    <script type="text/javascript" src="../mock-min.js"></script>
    <link rel="stylesheet" type="text/css" href="../demo.css">
    

</head>
<body style="background-color: #FFFFFF;">
	<style>
		.demo-exp-code td{padding:5px 0;}
		.demo-exp-code td.r-label{padding-right: 10px;}
	</style>
	<h2>日期框</h2>
	<h3>说明:</h3>
    <span>日期框（datebox）把可编辑的文本框和下拉日历面板结合起来，用户可以从下拉日历面板中选择日期，在文本框中输入的字符串可转换为有效日期。支持快捷t方式输入,t+2表示二天后,t-2表示二天前的日期。</span>
	<h3>如：</h3>
	<div class="demo-exp-code entry-content">
		<table class="use-prettyprint">
			<tr>
				<td class='r-label'>统计月份</td>
				<td class='r-label'>
					<input id="samth" class="hisui-datebox textbox" data-options='onSelect:onSelect,
					formatter:function(date){var y = date.getFullYear(); var m = date.getMonth()+1;return y+"-"+m;},validParams:"YM"'/>
				</td>
				<td class='r-label'>
					
				</td>
				<td class='r-label'>
					<a class="hisui-linkbutton" id="samthBtn">获取值</a>
				</td>
			</tr>
			<tr>
				<td class='r-label'>限定范围</td>
				<td>
					<input id="db" class="hisui-datebox textbox" data-options='onSelect:onSelect'/>
				</td>
				<td class='r-label'>
					<a class="hisui-linkbutton" id="setDateDisBtn">限定可选日期</a>
				</td>
				<td class='r-label'>
					<a class="hisui-linkbutton" id="dbBtn">获取值</a>
				</td>
			</tr>
			<tr>
				<td class='r-label required-label'>停止日期</td>
				<td>
					<input class="hisui-datebox textbox" value="2020-02-17" data-options='required:true'/>
				</td>
				<td style="color: red;">
					必填项
				</td>
			</tr>
			<tr>
				<td class='r-label'>结算时间</td>
				<td>
					<input id="dtb1" class="hisui-datetimebox textbox" data-options="onSelect:onSelect"/>
					<!-- <a id="btn1" class="hisui-linkbutton">sure</a> -->
				</td>
			</tr>
			<tr>
				<td class="r-label">
					选中的值
				</td>
				<td colspan="3"><span id="result"></span></td>
			</tr>
		</table>
		<script type="text/javascript" class="use-prettyprint">
			function onSelect(date){
				$('#result').text(date)
			}
			$(function(){
				$("#samthBtn").click(function(){
					var val = $("#samth").datebox('getValue');
					$.messager.alert( "提示",val);
				});
				$("#setDateDisBtn").click(function(){
					var now = new Date();
					var now6 = new Date();
					now6.setTime(now.getTime()+(6*24*60*60*1000));
					var opt = $("#db").datebox('options');
					opt.minDate = opt.formatter(now); //'2019-11-24';
					opt.maxDate = opt.formatter(now6); //'2019-11-30';
					$.messager.popover({msg: '设置可选日期范围成功',type:'success',timeout: 1000});
				});
				$("#dbBtn").click(function(){
					var val = $("#db").datebox('getValue');
					$.messager.alert( "提示",val);
				});
			})
		</script>
		
	</div>
 <script type="text/javascript">
// 	var init = function () {
// 		$("#btn1").click(function(){
// 			var valbox = $HUI.datebox("#db");
// 			var val = valbox.getValue();
// 			alert(val);
// 		});

// 	}	
//  	$(init);
</script>

<table class="table">
	<tr class="protitle">
		<th>属性</th>
		<th>说明</th>
		<th>默认值</th>
		<th><a href="https://hisui.cn/lib/jquery-easyui-1.3.2/api/datebox.html" style="float:right" target="_blank">查看EasyUI1.3.2的对应配置</a></th>
	</tr>
	<tr>
		<td>validParams</td>
		<td>默认值为YMD。表示日期显示成YYYY-MM-DD</td>
		<td>YMD</td>
		<td>如果是其它格式则不强制检查. 如配置成YM再实现formatter可实现例1效果<code>2019-07-05</code></td>
	</tr>
	<tr>
		<td>minDate</td>
		<td>可选最小日期。如:2019-11-25</td>
		<td>默认null</td>
		<td><code>2019-11-26</code></td>
	</tr>
	<tr>
		<td>maxDate</td>
		<td>可选最大日期。如:2019-11-25</td>
		<td>默认null</td>
		<td><code>2019-11-26</code></td>
	</tr>
</table>
<prettyprint/>
</body>
</html>